<template>
  <div class="singlePage" style="display: flex">
    <leftMenu :menuList="menuList"></leftMenu>
    <div class="mesPage">
      <search-form class="margin20" ref="searchForm" @sub="search"></search-form>
      <el-table
          :data="tableData"
          :height="'calc(100% - 128px)'"
          :header-cell-style="{background:'#F8F9FA'}"
          class="margin6">
        <el-table-column
            prop="date"
            label="序号"
            width="80">
          <template slot-scope="scope">
            {{ pageInfo.pageSize * (pageInfo.page) + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
            prop="title"
            label="标题"
            width="350">
        </el-table-column>
        <el-table-column
            prop="sourceSystem"
            label="来源">
        </el-table-column>
        <el-table-column
            prop="msgType"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="eventId"
            label="流程编号">
        </el-table-column>
        <el-table-column
            prop="eventTime"
            label="流程到达时间"
            width="190">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
          <template slot-scope="scope">
            <span style="color: #3772FF" v-if="1 === scope.row.status">待办</span>
            <span style="color: #3772FF" v-if="2 === scope.row.status">已办</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="applicantName"
            label="申请人">
        </el-table-column>
        <el-table-column
            prop="applicantDept"
            label="申请部门">
        </el-table-column>
        <el-table-column
            prop="applicantCompany"
            label="申请公司">
        </el-table-column>
        <el-table-column
            v-if="'messageDone'!==type"
            prop="address"
            label="操作">
          <template slot-scope="scope">
            <el-button   type="text"
                         style="color: #1891FF;margin-left: -5px"
                         @click="goPage(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.current"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import searchForm from "@/views/messageManage/components/searchForm";
import leftMenu from "@/components/leftMenu";
export default {
  name: "message",
  components:{
    leftMenu,
    searchForm
  },
  watch:{
    $route(e){
      //console.log(e.name)
      /*console.log(99999)
      console.log(e)
      this.type=e.name
      this.pageInfo.page=0
      this.$refs.searchForm.formInline={}
      this.getMessage()*/
      //this.$refs.searchForm.getPer()
    },
  },
  mounted() {
    this.getMessage()
    this.$refs.searchForm.getPer()
  },
  methods:{
    goPage(e){
      window.open(e.systemUrl,'_blank')
    },
    handleSizeChange(e){
      //console.log(e)
      this.pageInfo.pageSize=e
      this.getMessage()
    },
    handleCurrentChange(e){
      //console.log(e)
      this.pageInfo.page=e-1
      this.getMessage()
    },
    search(){
      this.pageInfo.page=0
      this.getMessage()
    },
    getMessage(){
      this.type=this.$route.name
      let par=JSON.parse(JSON.stringify(this.pageInfo))
      if('messageDone'===this.type){
        par.status=2
      }else{
        par.status=1
      }
      let c=this.$refs.searchForm.formInline
      par=Object.assign(par,c)
      console.log(this.pageInfo)
      console.log(88888)
      console.log(par)
      this.$api.queryMessage(par).then(res=>{
        this.tableData=res.data.data
        this.pageInfo.total=res.data.recordsTotal
      }).catch()
    }
  },
  data(){
    return {
      pageInfo:{
        page:0,
        pageSize:10,
        total:0,
        current:1
      },
      tableData:[],
      type:'',
      menuList:[
        {
          title:'待办消息',
          name:'messageTodo'
        },
        {
          title:'已办消息',
          name:'messageDone'
        },
        {
          title:'待阅消息',
          name:'messagePre'
        },
        {
          title:'已阅消息',
          name:'messageRead'
        }
      ]
    }
  },
}
</script>

<style scoped lang="less">
.mesPage{
  width: calc(100% - 153px);
  height: auto;background: #fff;
  border-radius: 8px;
  margin: 16px 0 16px 18px
}
.margin20{
  max-width: calc(100% - 39px);
  margin:20px 0 0 20px
}
.margin6{
  max-width: calc(100% - 39px);
  margin:-10px 0 0 20px
}
page{
  margin-right: 15px;
  display: flex;
  margin-top: 10px;
  flex-direction: row-reverse
}
/deep/.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
  background: transparent!important;
  border-color: transparent!important;
  color: lightblue;
}
.page{
  margin-right: 20px;
  display: flex;
  margin-top: 10px;
  flex-direction: row-reverse
}
/deep/ .btn {
  margin-left: -20px!important;
}
</style>
